{extend name="../index/public/mlay" /}
{block name="title"}我的消息{/block}
{block name="style"}
<style>
	html {
		height: 100%;
	}

	body {
		height: 100%;
	}

	#app {
		height: 100%;
	}

	.money {
		background-image: url(__TEM_STATIC__/img/my/mybag.png);
		background-repeat: no-repeat;
		background-size: 100% auto;
		background-position: bottom center;
		display: flex;
		height: 7rem;
		justify-content: space-between;
		padding: 0 3rem;
		padding-top: 1rem;
		font-size: 0.7rem;
	}

	.data {
		color: #626262;
		/* font-family: Arial; */
	}

	.bold {
		font-weight: bold;
	}
</style>
<link rel="stylesheet" href="__TEM_STATIC__/css/public.css" />
{/block}
{block name="header"}
{/block}
{block name="container"}
<div id="app">
	<div class="weui-panel__bd margin-xs">
		<div v-for="(item,index) in Data" class="weui-media-box weui-media-box_text bgw">
			<h4 class="weui-media-box__title">{{item.type}}</h4>
			<p class="weui-media-box__desc font_333">{{item.content}}</p>
			<ul class="weui-media-box__info">
				<li class="weui-media-box__info__meta">{{item.uid_send}}</li>
				<li class="weui-media-box__info__meta">{{item.time}}</li>
				<!-- <li class="weui-media-box__info__meta weui-media-box__info__meta_extra">{{}}</li> -->
			</ul>
		</div>
	</div>
</div>
{/block}
{block name="copyright"}{/block}
{block name="script"}
<!-- 引入vue.js文件使用vue开发 -->
<script src="__TEM_STATIC__/js/public/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script>
	var vm = new Vue({
		el: "#app",
		data() {
			return {
				page: 1, //页数
				last_page: '', //总页数
				isLoadding: false,
				Data: [],
			}
		},
		//计算属性	
		computed: {},
		//监听属性
		watch: {},
		//钩子函数	
		created() {
			this.shuju()
		},
		mounted() {
			window.addEventListener('scroll', this.handleScroll); // 监听滚动事件，然后用handleScroll这个方法进行相应的处理
		},
		methods: {
			handleScroll() {
				//变量scrollTop是滚动条滚动时，距离顶部的距离
				var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
				//变量windowHeight是可视区的高度
				var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
				//变量scrollHeight是滚动条的总高度
				var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
				//滚动条到底部的条件
				if (scrollTop + windowHeight >= scrollHeight && vm.isLoadding == false) {
					//加载数据的函数
					console.log("距顶部" + scrollTop + "可视区高度" + windowHeight + "滚动条总高度" + scrollHeight);
					if (this.page < this.last_page) {
						this.page++
						this.shuju();
					}
				}
			},

			shuju: function() {
				var loading = weui.loading('loading', {
					content: '正在载入'
				});
				var that = this
				$.post("", {
					page: that.page

				}, function(res) {
					console.log(res);
					that.last_page = res.data.last_page //最后页数
					if (that.page > 1) {
						that.Data = that.Data.concat(res.data.items);
						that.show = true
					} else {
						that.Data = res.data.items
					}
					console.log(that.Data);
					loading.hide();
				});
			},
		}
	})
</script>
{/block}
